import React, { useState, useEffect } from 'react';
import PanelListTotal from '@/components/PanelListTotal';
import { t } from '@lingui/macro';
import { Box, Divider } from '@alifd/next';
import dayjs from 'dayjs';
import { observer } from 'mobx-react-lite';

const RangePreset = {};
RangePreset[t`昨日`] = [dayjs().subtract(1, 'day'), dayjs()];
RangePreset[t`近一周`] = [dayjs().add(-7, 'day'), dayjs()];
RangePreset[t`近二周`] = [dayjs().add(-15, 'day'), dayjs()];

const TopList = ({ data }) => {
  const { clickCount, orderCount, registerCount, sourceCount, costCount, saleCount } = data || {};
  const [state, setState] = useState([]);

  useEffect(() => {
    (async () => {
      const left = [
        { title: t`投放渠道数`, value: sourceCount, UC: null },
        { title: t`点击总数`, value: clickCount, UC: null },
        { title: t`注册总数`, value: registerCount, UC: null },
        { title: t`下单总数`, value: orderCount, UC: null },
        { title: t`活动销售额`, value: saleCount, UC: 1 },
        { title: t`活动成本`, value: costCount, UC: 1 },
      ];
      setState(left);
    })();
  }, [data]);

  return (
    <>
      <Box direction="row" >
        <PanelListTotal data={state} width={'87vw'} />
      </Box>
      <Divider />
    </>
  );
};

export default observer(TopList);
